<template>
    <div>
        <el-row v-if="displayQuestion">
            <el-col :span="18" :offset="4">
                <el-card :style="{ backgroundColor: '#409FFF' }" class="askCard" v-html="displayQuestion"></el-card>
            </el-col>
            <el-col :span="2">
              <el-icon class="icon" :size="40" color="#409EFC">
                  <User />
              </el-icon>
            </el-col>
        </el-row>
        <el-row v-if="cardValue">
          <el-col :span="2">
            <el-icon class="icon" :size="40" color="#409EFC">
              <Service />
            </el-icon>
          </el-col>
          <el-col :span="18">
            <el-card class="card" v-html="cardValue"></el-card>
          </el-col>
        </el-row>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
import { Service } from '@element-plus/icons-vue';
import { User } from '@element-plus/icons-vue';

export default defineComponent({
  name: 'Dialogue',
  components: {
    Service,User
  },
  props: {
    cardValue: {
      type: String,
      default: '',
    },
    displayQuestion: {
      type: String,
      default: '',
    },
  },
});
</script>
<style>
.askCard {
  text-align: left;
  padding: 1em;
}
.card {
  text-align: left;
  padding: 1em;
}
div{
    margin-top: 8px;
}
</style>